<template>
  <div class="PaintBtn">
    <div class="operator-container">
      <el-button-group class="operator-container-header">
        <el-button icon="el-icon-aim" @click="drawPoint"></el-button>
        <el-button icon="el-icon-paperclip" @click="drawLine"></el-button>
        <el-button icon="el-icon-crop" @click="drawArea"></el-button>
        <el-button
          icon="el-icon-delete"
          @click="draw.reset(), editclearLayer(), clearLayer(),endClear()"
        ></el-button>
        <el-button
          style="color: #009fe8"
          :class="{ show: isedit }"
          @click="editlayer"
          >编辑</el-button
        >
        <el-button
          style="color: #009fe8"
          :class="{ show: isShow }"
          @click="showlayerfunc"
          >服务层</el-button
        >
      </el-button-group>
      <el-button-group class="operator-container-header" v-if="isedit">
        <el-button
          icon="el-icon-aim"
          @click="editPoint"
          v-if="ispoint"
        ></el-button>
        <el-button
          icon="el-icon-paperclip"
          @click="editLine"
          v-if="isline"
        ></el-button>
        <el-button
          icon="el-icon-crop"
          @click="editArea"
          v-if="isarea"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          @click="draw.reset(), editclearLayer(), deleteEdit()"
        ></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "PaintBtn",
  props: [
    "draw",
    "showLayer",
    "baseView",
    "apiInstance",
    "bdLayer",
    "editLayer",
  ],
  data() {
    return {
      isShow: false, // 服务层的显示与隐藏
      isedit: false, // 编辑功能的显示与隐藏
      point: null, // 存储点的数据
      line: null, // 存储线的数据
      area: null, // 存储面的数据
      ispoint: false, // 控制点编辑功能的显示与隐藏
      isline: false, // 控制线编辑功能的显示与隐藏
      isarea: false, // 控制面编辑功能的显示与隐藏
      tableData: [], //列表展示数据
    };
  },
  methods: {
    /**
     * 画点
     */
    drawPoint() {
      this.editclearLayer();
      this.apiInstance.enableTraceCreatePoint(
        this.draw,
        this.baseView,
        this.editLayer,
        null,
        (res) => {
          console.log("enableTraceCreatePoint", res);
          this.editclearLayer();
          this.apiInstance.wktToPoint(res, this.showLayer);
          this.point = res;
          this.ispoint = true;
          this.$message.success("绘制成功");
        }
      );
    },
    /**
     * 画线
     */
    drawLine() {
      this.editclearLayer();
      this.apiInstance.enableCreateLine(
        this.draw,
        this.baseView,
        this.editLayer,
        null,
        (res) => {
          console.log("enableCreateLine", res);
          this.editclearLayer();
          this.apiInstance.wktToPolyline(res, this.showLayer);
          this.line = res;
          this.isline = true;
          this.$message.success("绘制成功");
        }
      );
    },
    /**
     * 画面
     */
    drawArea() {
      this.editclearLayer();
      this.apiInstance.enableTraceCreatePolygon(
        this.draw,
        this.baseView,
        this.editLayer,
        null,
        (res) => {
          console.log("enableTraceCreatePolygon", res);
          this.editclearLayer();
          this.apiInstance.wktToPolygon(res, this.showLayer);
          this.area = res;
          this.isarea = true;
          this.$message.success("绘制成功");
        }
      );
    },

    // 编辑点
    editPoint() {
      this.apiInstance.enableTraceEditPoint(
        this.baseView,
        this.editLayer,
        this.point,
        null,
        (result) => {
          this.editclearLayer();
          this.clearLayer()
          this.apiInstance.wktToPoint(result, this.showLayer);
          this.point = result;
        }
      );
      this.$message.success("绘制成功");
    },

    // 编辑线
    editLine() {
      this.apiInstance.enableTraceEditPolyline(
        this.baseView,
        this.editLayer,
        this.line,
        null,
        (result) => {
          this.editclearLayer();
          this.clearLayer()
          this.apiInstance.wktToPolyline(result, this.showLayer);
          this.line = result;
        }
      );
      this.$message.success("绘制成功");
    },

    //编辑面
    editArea() {
      this.apiInstance.enableTraceEditPolygon(
        this.baseView,
        this.editLayer,
        this.area,
        null,
        (result) => {
          this.editclearLayer();
          this.clearLayer()
          this.apiInstance.wktToPolygon(result, this.showLayer);
          this.area = result;
        }
      );
      this.$message.success("绘制成功");
    },

    /**
     * 控制服务层的显示与隐藏
     */
    // 服务层的显示与隐藏
    showlayerfunc() {
      this.bdLayer.visible = !this.bdLayer.visible;
      this.isShow = !this.isShow;
    },
    //编辑层的显示与隐藏
    editlayer() {
      this.isedit = !this.isedit;
    },
    // 显示层的显示与隐藏
    clearLayer() {
      this.showLayer.removeAll();
    },
    // 清除编辑
    deleteEdit() {
      this.ispoint = false;
      this.isline = false;
      this.isarea = false;
      this.isedit = false;
    },
    editclearLayer() {
      this.editLayer.removeAll();
    },
    endClear() {
      this.point = null
      this.line = null
      this.area = null
      this.ispoint = false;
      this.isline = false;
      this.isarea = false;
      this.isedit = false;
    }
  },
};
</script>

<style lang="less" scoped>
.PaintBtn {
  position: absolute;
  z-index: 900;
  top: 0;
  right: 48px;
  padding-bottom: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.operator-container-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f3f4f5;
  el-button {
    padding: 5px 6px;
    font-size: 12px;
  }
}
.commonBlock-list {
  border-radius: 10px;
  margin-top: 5px;
  .el-table {
    &::before {
      display: block;
    }
  }
  .el-table__header-wrapper {
    th {
      border-bottom: none;
      .cell {
        color: #666666;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  .el-table__body-wrapper {
    tr {
      td {
        //padding: 10px;
        border-bottom: none;
        .cell {
          font-size: 12px;
        }
      }
    }
  }
}
.show {
  background-color: #005bab;
}
</style>